<template>
	<view>
		<view class="row" style="margin-top: 10rpx;">
			<uni-row>
				<uni-col :offset="1" :span="5"><text class="label"> 识别结果：</text></uni-col>
				<uni-col :span="16">
				  <view class="ocr">
				  	{{academicOCR}}	
				  </view>
				</uni-col>
			</uni-row>
		</view>
		
		<view class="row" style="margin-top: 10rpx;">
			<uni-row>
				<uni-col :offset="1" :span="5"><text class="label"> 证明类型：</text></uni-col>
				<uni-col :span="16">
				  <uni-data-select
					v-model="type"
					:localdata="range"
					@change="change"
					:clear="false"
				  ></uni-data-select>
				</uni-col>
			</uni-row>
		</view>
		<view class="row" v-if="type==0">
			<uni-row>
				<uni-col :offset="1" :span="5"><text class="label"> 竞赛名称：</text></uni-col>
				<uni-col :span="16">
				  <uni-easyinput trim="all" v-model="projectName" placeholder="请输入竞赛名称"></uni-easyinput>
				</uni-col>
				<uni-col :span="2">
					
				</uni-col>
			</uni-row>
		</view>
		<view class="row" v-if="type==0">
			<uni-row>
				<uni-col :offset="1" :span="5"><text class="label"> 竞赛级别:</text></uni-col>
				<uni-col :span="16">
				  <uni-data-select
					v-model="level"
					:localdata="levelRange"
					@change="levelChange"
					:clear="false"
				  ></uni-data-select>
				</uni-col>
				<uni-col :span="2">
					<view class="icon-box">
						<uni-icons v-if="levelStatus!=0" :type="geticon(levelStatus)" size="16" :color='geticonColor(levelStatus)'></uni-icons>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="row" v-if="type==0">
			<uni-row>
				<uni-col :offset="1" :span="5"><text class="label"> 获奖等级:</text></uni-col>
				<uni-col :span="16" class="icon">
				  <uni-data-select
					v-model="rank"
					:localdata="rankRange"
					@change="rankChange"
					:clear="false"
				  ></uni-data-select>
				</uni-col>
				<uni-col :span="2">
					<uni-icons v-if="rankStatus!=0" :type="geticon(rankStatus)" size="16" :color='geticonColor(rankStatus)'></uni-icons>
				</uni-col>
			</uni-row>
		</view>
		<view class="row" v-if="type==0">
			<uni-row>
				<uni-col :offset="1" :span="5"><text class="label"> 获奖时间:</text></uni-col>
				<uni-col :span="16">
				  <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				  						<view class="uni-input">{{date}}</view>
				  </picker>
				</uni-col>
			</uni-row>
		</view>
		<view class="row" v-if="type==0">
			<uni-row>
				<uni-col :offset="1" :span="5"><text class="label"> 团队人数:</text></uni-col>
				<uni-col :span="16">
				  <uni-data-select
					v-model="memNum"
					:localdata="memNumRange"
					@change="memNumChange"
					:clear="false"
				  ></uni-data-select>
				</uni-col>
				<uni-col :span="2">
					<uni-icons v-if="memNumStatus!=0" :type="geticon(memNumStatus)" size="16" :color='geticonColor(memNumStatus)'></uni-icons>
				</uni-col>
			</uni-row>
		</view>
		<view class="row" v-if="type==0">
			<uni-row>
				<uni-col :offset="1" :span="5"><text class="label"> 是否负责人:</text></uni-col>
				<uni-col :span="16">
				  <uni-data-select
					v-model="ishead"
					:localdata="isheadRange"
					@change="isheadChange"
					:clear="false"
				  ></uni-data-select>
				</uni-col>
				<uni-col :span="2">
					<uni-icons v-if="isheadStatus!=0" :type="geticon(isheadStatus)" size="16" :color='geticonColor(isheadStatus)'></uni-icons>
				</uni-col>
			</uni-row>
		</view>
		<view class="button-box">
			<button  class="submit-button" @click="onSubmit"> 提交</button>
		</view>
		
		
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			 const currentDate = this.getDate({
				format: true
			})
			return {
				type:0,
				range: [
					  { value: 0, text: "竞赛" },
					  { value: 1, text: "论文" },
					  { value: 2, text: "专利" },
					  { value: 3, text: "项目" }
				],
				levelRange:[
					{ value: 0, text: "国家级" },
				    { value: 1, text: "省（部市）级" },
				    { value: 2, text: "校（地市）级" },
				    { value: 3, text: "学部（系）级" }
				],
				projectName:"",
				academicOCR:"",
				level:null,
				rank:null,
				rankRange:[
					{ value:0 , text: "特等奖" },
					{ value: 1, text: "一等奖" },
					{ value: 2, text: "二等奖" },
					{ value: 3, text: "三等奖" },
					{ value: 4, text: "优秀奖" }
				],
				date:currentDate,
				memNum:null,
				memNumRange:[
					{ value: 1, text: "1" },
					{ value: 2, text: "2" },
					{ value: 3, text: "3" },
					{ value: 4, text: "4" },
					{ value: 5, text: "5" },
					{ value: 6, text: "6" }
				],
				ishead:null,
				isheadRange:[
					{ value: 0, text: "否" },
					{ value: 1, text: "是" }
				],
				levelStatus:0,
				rankStatus:0,
				memNumStatus:0,
				isheadStatus:0
			}
		},
		onLoad() {
			this.academicOCR=uni.getStorageSync("academicOCR")
			console.log(this.academicOCR)
			if (this.academicOCR.length!=0){
				uni.showToast({
					icon:'success',
					title:"附件上传成功!"
				})
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			change(e) {
					console.log("e:", e);
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			 bindDateChange: function(e) {
				this.date = e.detail.value
			},
			geticon(status){
				const iconList=["circle","spinner-cycle","closeempty","checkmarkempty"]
				return iconList[status]
			},
			geticonColor(status){
				const iconList=["blue","grey","red","green"]
				return iconList[status]
			},
			levelChange(e){
				this.levelStatus=1;
				let levelKeywords=[['国家','全国'],['上海','全市','市级','教育部','科技部'],['华东师范大学','全校','学校'],['学部','院系','学院']];
				for(let item of levelKeywords[e]){
					if(this.academicOCR.indexOf(item)!=-1){
						this.levelStatus=3;
						return;
					}
				}
				this.levelStatus=2;
				
			},
			rankChange(e){
				console.log(e);
				this.rankStatus=1;
				const str=this.rankRange[e].text;
				console.log(str);
				console.log(this.academicOCR.indexOf(str));
				if(this.academicOCR.indexOf(str)!=-1){
					this.rankStatus=3;
				}
				else{
					this.rankStatus=2;
				}
			},
			memNumChange(e){
				this.memNumStatus=1;
				const API_BASE_URL = this.$ProjectConfig.API_BASE_URL;
				const this2 = this;
				wx.request({
					url: API_BASE_URL + '/material/memNumValidate',
					method: 'GET',
					header: {
					  'Content-Type': 'application/json',
					},
					data: {
					    ocr:this2.academicOCR,
						memNum:this2.memNum
					},
					success: function(res) {
						console.log(res.data.res);
						if(res.data.res){
							this2.memNumStatus=3;
						}
						else{
							this2.memNumStatus=2;
						}
					}
				});
				
			},
			isheadChange(e){
				this.isheadStatus=1;
				const API_BASE_URL = this.$ProjectConfig.API_BASE_URL;
				const this2 = this;
				wx.request({
					url: API_BASE_URL + '/material/isheadValidate',
					method: 'GET',
					header: {
					  'Content-Type': 'application/json',
					},
					data: {
					    ocr:this2.academicOCR,
						user_id:uni.getStorageSync('user_id'),
						ishead:this2.ishead
					},
					success: function(res) {
						console.log(res.data.res);
						if(res.data.res){
							this2.isheadStatus=3;
						}
						else{
							this2.isheadStatus=2;
						}
					}
				});
			},
			onSubmit(){
				if(this.projectName==""||this.levelStatus==0||this.rankStatus==0||this.memNumStatus==0||this.isheadStatus==0){
					uni.showToast({
						title: '表单不完整！',
						icon:'error',
						duration: 1000
					});
					return;
				}
				
				if(this.levelStatus!=3||this.rankStatus!=3||this.memNumStatus!=3||this.isheadStatus!=3){
					uni.showModal({
						title: '提示',
						content: '有校验未通过的选项！将进入人工审核，确认提交？',
						success: function (res) {
							if (res.confirm) {
								uni.showToast({
									title: '已提交',
									icon:'success',
									duration: 1000,
									success() {
										uni.navigateBack();
									}
								});
								
							}
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
.label{
	color:#333;
	font-size:$uni-font-size-base;
	line-height: 70rpx;
}
.row{
	margin:10rpx 0rpx;
	font-size: $uni-font-size-base;
}
.uni-input{
	line-height: 70rpx;
	font-size: 24rpx;
	border: 1rpx solid #e5e5e5;
	padding-left: 10rpx;
	border-radius: 10rpx;
}
.icon{
	display: flex;
	width:100%;
	height:100%;
	justify-content: center;
	align-items: center;
}

.icon-box{
	height: 70rpx;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.submit-button{
	margin:30rpx 10rpx;
	background-color: $uni-bg-color;
	width:50%;
	color: #FFF;
	font-size: $uni-font-size-base;
	padding:5rpx;
}
.button-box{
	display: flex;
	justify-content: center;
	align-items: center;
}
.ocr{
	color:#888;
	border: 2rpx solid #e5e5e5 ;
	border-radius: 10rpx;
	padding:10rpx;
	line-height: 1.5;
}
</style>
